<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="xiangqi">
           
    </ul>
</body>
<script>
    // 这是数据库的数据
    var goodlist = [
        { id: 111, url: 'images/g1.jpg', name: '阿联酋美女1号', price: 1998, age: 20 },
        { id: 22, url: 'images/g2.jpg', name: '阿联酋美女2号', price: 98, age: 18 },
        { id: 3325, url: 'images/g3.jpg', name: '阿联酋美女3号', price: 998, age: 22 },
        { id: 4, url: 'images/g4.jpg', name: '阿联酋美女4号', price: 9.8, age: 24 },
        { id: 5, url: 'images/g3.jpg', name: '阿联酋美女5号', price: 9888, age: 18 }
    ]

    // 拿到地址url地址（问号的后面部分）
    var p = location.search;
    // console.log(p);             // ?id=111

    // 将地址变成数组
    var p1=p.substr(1).split("=");
    // console.log(p1)             // (2) ["id", "111"]

    // 将数组中的数据传入对象
    var obj = {}
    obj[p1[0]] = p1[1];
    // console.log(obj)            //{id: "111"}

    // 过滤数组，通过对比返回出一个数组对象
    var res = goodlist.filter(function(val,idx,arr){
        return obj.id == goodlist[idx].id
    })
    // console.log(res)

    // 将过滤后的数据拼接渲染到页面
    xiangqi.innerHTML = ' <li class="'+res[0].id+'"><img src="'+res[0].url+'">' +
                '<p>姓名：'+res[0].name+'</p>' +
                '<p>价格：'+res[0].price+'</p>' +
                '<p>年龄：'+res[0].age+'</p>' +
                '</li>'
</script>
</html>